<template>
    <div class="addDevice">
        <el-form ref="form" :model="form1" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务名称" prop="wgmc">
                        <el-input v-model="form1.wgmc"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="版本日期" prop="ccrq">
                        <el-date-picker v-model="form1.ccrq" type="date" placeholder="选择日期" style="width: 100%"> </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="升级文件" prop="azdz">
                        <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务类型" prop="ccrq">
                        <el-input v-model="form1.mbIp"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="升级设备范围" prop="ccrq">
                        <el-input v-model="form1.mbdk"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务开始时间" prop="wkgqsj">
                        <el-date-picker v-model="form1.wkgqsj" type="date" placeholder="选择日期"> </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="close">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {LeftTree} from '@/mockData/monitorCenter.js'
import {Utility} from '@/libs/utility'
// import uploadFile from "@/components/customComponents/managementCenter/uploadFile"
export default {
    name: 'addDevice',
    components: {},
    // props: ["formData"],
    data() {
        return {
            jzq: [],
            wgList: [
                {
                    label: '测试网关1',
                    value: '1'
                },
                {
                    label: '测试网关3',
                    value: '3'
                },
                {
                    label: '测试网关2',
                    value: '2'
                }
            ],
            device_type: '1',
            device_typeList: Utility.getDictList('deviceType'),
            internet_typeList: Utility.getDictList('internetType'),
            sspdList: Utility.getDictList('sspdList'),
            // 串口波特率
            ckbtl: Utility.getDictList('ckbtl'),
            // 空中波特率
            kzbtl: Utility.getDictList('ckbtl'),
            rules: {
                parentId: [
                    {required: true, message: '请选择所属建筑', trigger: ['blur', 'change']}
                    // {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
                ],
                name: [{required: true, message: '房间名称不能为空', trigger: ['blur', 'change']}],
                sfcl: [{required: true, message: '请选择身份策略', trigger: ['blur', 'change']}],
                djfa: [{required: true, message: '请选择定价方案', trigger: ['blur', 'change']}],
                qybj: [{required: true, message: '请选择启用告警', trigger: ['blur', 'change']}],
                bjyz: [{required: true, message: '请选择报警阈值', trigger: ['blur', 'change']}],
                gtjf: [{required: true, message: '请选择柜台缴费', trigger: ['blur', 'change']}],
                ydcz: [{required: true, message: '请选择移动充值', trigger: ['blur', 'change']}]
            },
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            form1: {
                parentId: '',
                // 网关名称
                wgmc: '',
                // 网关标识
                wgbs: '',
                // 网关型号  internetType
                wgxh: '',
                // GPRS卡号
                gprsNo: '',
                //出厂日期
                ccrq: '',
                // 所属建筑
                ssjz: '',
                // 目标IP
                mbIp: '',
                // 目标端口
                mbdk: '',
                // 冻结数据长度
                djsjcd: '',
                // 最大终端数量
                zddksl: '',
                // 冻结周期
                djzq: '',
                // 网卡过期时间
                wkgqsj: '',
                // 排序号
                pxh: '',
                // 安装地址
                azdz: '',
                // 安装时间
                azsj: '',
                // 安装图片
                aztp: ''
            }
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.initData()
        })
    },
    methods: {
        close() {
            this.$emit('close', '')
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        onDelete() {
            this.ybList.splice(this.ybList.length - 1, 1)
        },
        cancel() {
            this.$emit('close', '')
        },
        initData() {
            console.log('value....')
            // let treeData = LeftTree
            // let listData = Utility.arrayFlat(treeData, (t) => t.children)
            // treeData = Utility.arrayCascade(listData, (c, p) => c.parentId == p.id)
            this.treeSelectList = LeftTree
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        },
        onSubmit() {
            this.close()
            // let that = this
            // this.$refs["form"].validate((valid) => {
            //     if (valid) {
            //         console.log("111")
            //         // that.$emit("close", "")
            //         that.step = 2
            //     }
            // })
        },
        onStepOk() {
            var ybList = this.ybList
            let that = this
            let isTrue = true
            ybList?.forEach((item, i) => {
                console.log(that.$refs['formTwo'][i], 'fo...')
                that.$refs['formTwo'][i].validate((valid) => {
                    if (valid) {
                        console.log('获取当前form值')
                        // that.$emit("close", "")
                    } else {
                        isTrue = false
                    }
                })
            })
            console.log(isTrue)
        }
    }
}
</script>

<style lang="scss" scoped>
.ybList {
    .ybContent {
        height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        .ybNum {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            padding: 5px 0 10px 11px;
            margin-bottom: 10px;
        }
    }
    .btnSave {
        text-align: right;
    }
}
.addDiv {
    font-size: 16px;
    background-color: #f9fafc;
    height: 45px;
    line-height: 45px;
    margin-bottom: 20px;
    margin-left: 5px;
    border-radius: 2px;
    padding: 0 18px;
    text-align: right;
    display: flex;
    span {
        font-size: 16px;
        width: 150px;
        text-align: left;
        color: #777;
        label {
            font-size: 16px;
            color: #333;
        }
    }
    .customBtns {
        text-align: right;
        flex: 1;
    }
}
.titleImg {
    margin-bottom: 10px;
}
.addDevice {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border: 1px solid #e0e0e0;
    }
    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
}
</style>
